<template>
    <el-tabs tab-position="left" style="height: 100vh" class="demo-tabs">
        <el-tab-pane label="测试历史">
            <el-row>
                <el-col :span="24">
                    <el-card>
                        <div slot="header">
                            <span>用户列表</span>
                        </div>
                        <el-table :data="contestData" style="width: 100%">
                            <el-table-column prop="username" label="用户名"></el-table-column>
                            <el-table-column prop="contest_name" label="测试名称"></el-table-column>
                            <el-table-column prop="score" label="分数"></el-table-column>
                            <el-table-column prop="submit_time" label="提交时间"></el-table-column>
                            <el-table-column label="操作">
                                <template #default="{ row }">
                                    <el-button @click="() => { goToContest(row) }" type="primary"
                                        size="mini">查看详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-card>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="修改密码">
            <el-row>
                <el-col :span="24">
                    <el-card>
                        <div slot="header">
                            <span>修改密码</span>
                        </div>
                        <el-form :model="form" label-width="80px">
                            <el-form-item label="password">
                                <el-input v-model="newPassword"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-button @click="updatePassword" type="primary">修改</el-button>
                    </el-card>
                </el-col>
            </el-row>
        </el-tab-pane>
    </el-tabs>
</template>
 
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'
const router = useRouter()
function goToContest(item) {
    // console.log(item)
    router.push({ name: 'contest_detail', query: { obj: JSON.stringify(item) } })
}
let contestData = ref([])
let newPassword = ref('')
axios.post('http://localhost:8000/contest_user/get_one', { 'user_id': localStorage.getItem('user_id') })
    .then(res => {
        contestData.value = res.data.data
    })
    .catch(err => {
        console.log(err)
    })


function updatePassword() {
    axios.post('http://localhost:8000/users/update_one', { "cond": { "id": localStorage.getItem('user_id') }, "item": { "password": newPassword.value } })
        .then(res => {
            if (res.data.code === 200) {
                ElMessage.success('修改成功')
            }
            else {
                ElMessage.error('修改失败')
            }

        })
        .catch(err => {
            console.log(err)
        })

}


</script> 
 
<style scoped>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
    height: 100%;
}
</style>